<template>
  <div>
    <FormItemRest>
      <div class="flex">
        <Input v-model:value="selectValue" :placeholder="placeholder" :size="size" readonly />
        <a-button type="primary" class="ml-2" @click="handleSearch">选择</a-button>
      </div>
      <SelectRoleModal
        @register="registerSelectRoleModal"
        @success="handleSuccess"
        :zIndex="2000"
      />
    </FormItemRest>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Input, Form } from 'ant-design-vue';
  import SelectRoleModal from '/@/views/system/workflow/flowManagement/modules/flowPicture/modules/modules/nodeEdit/modules/SelectRoleModal.vue';
  import { useModal } from '/@/components/Modal';
  const FormItemRest = Form.ItemRest;

  const emit = defineEmits(['change', 'update:value']);
  const props = defineProps({
    size: { type: String, default: 'default' },
    placeholder: { type: String, default: '请选择角色' },
    value: { type: String, default: '' },

    //已选角色
    roleCodes: { type: String, default: '' },
    //0只能选择一个
    type: { type: [Number, String], default: 1 },
  });
  const selectValue = ref('');
  const [registerSelectRoleModal, { openModal }] = useModal();
  const handleOpen = () => {
    console.log('props', props);
    let targetKeys = props.roleCodes ? props.roleCodes.split(',') : [];
    openModal(true, {
      record: {
        targetKeys,
      },
    });
  };
  //点击按钮
  const handleSearch = () => {
    handleOpen();
  };
  const handleSuccess = ({ codes, codeTexts }) => {
    let dataRef = {
      codes,
      codeTexts,
    };
    emit('update:value', dataRef['codeTexts']);
    emit('change', dataRef['codeTexts'], { dataRef });
  };
  watch(
    () => props.value,
    (newValue) => {
      selectValue.value = newValue;
    },
    {
      // deep: true,
      immediate: true,
    },
  );
</script>
